<template>
  <el-header>
      <el-row :gutter="20" class="border">
      <el-col :offset="1" :span="4">
        <router-link to="/chat">
          <el-image
              style="width: 200px; height: 42px;position: relative;top:2px;left: 45px"
              :src="require('../assets/友友在线聊天室.png')" class="icon-position">
          </el-image>
        </router-link>
      </el-col>
      <el-col :span="6">
        <el-menu class="el-menu-demo font-famliy" mode="horizontal" style="border-bottom: none" active-text-color="gray"  @select="handleSelect">
          <el-menu-item index="1">在线聊天室</el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="3" >
        <span  style="position:relative;left: 400px;top: 20px;">
          <el-link :underline="false" class="user-name">欢迎您，{{ username }}~</el-link></span>
      </el-col>
      <el-col :span="1" style="position: relative;left: 350px;">
                <el-dropdown @command="handleCommand">
                  <el-avatar :src="require('@/assets/用户 (1).png')" class="el-dropdown-link" style="position: relative;top: 10px"></el-avatar>
                  <el-dropdown-menu slot="dropdown" class="font-famliy" >
                    <el-dropdown-item command="exit">退出</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
      </el-col>
    </el-row>
    <el-dialog
        title="确认退出"
        :visible.sync="confirmDialogVisible"
        width="30%">
      <span>您真的要退出吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="confirm">确定</el-button>
        <el-button @click="cancel">取消</el-button>
      </span>
    </el-dialog>
  </el-header>

</template>

<script>
import HeaderContent from "@/components/main/HeaderContent";
import axios from "axios";
import {Loading} from "element-ui";
export default {
  name: "Header",
  components: {HeaderContent},
  data(){
    return {
      searchInput:'',
      username:'',
      confirmDialogVisible:false,
      url:'',
      isNavigating:false
    }
  },
  methods:{

    jumpToChangePwd(){
      const currentPath = this.$route.path
      if(currentPath=='/changepassword'){
        return;
      }
      this.$router.push({
        path:'/changepassword'
      })
    },
    jumpToSinglePage(){
      const currentPath = this.$route.path
      const targetPath = '/singlepage/'+"post/"+this.username


      if(currentPath==targetPath){
        return;
      }

      if(this.isNavigating){
        return;
      }

      this.isNavigating=true

      this.$router.push({
        path:targetPath
      }).finally(() => {
        // 导航完成后，重置导航标志位为 false
        this.isNavigating = false;
      });
    },
    exit(){
      this.$http.get('/user/exit')
          .then(response => {
            // 请求成功，跳转页面
            console.log(response.data);
            localStorage.clear()
            this.$router.push({
              path:"/login"
            })
          })
          .catch(error => {
            // 请求失败，处理错误信息
            console.error(error);
            localStorage.clear()
            this.$router.push({
              path:"/login"
            })
          });
    },
    cancel(){
      this.confirmDialogVisible=false
    },
    confirm(){
      this.confirmDialogVisible = false;
      let ld=Loading.service({
        lock:true,
        text:"正在退出",
        background:'rgba(255,255,255,0.5)',
      })
      setTimeout(()=>{
        ld.close()
        this.exit()
        this.$message.success("退出成功！")
      },1000)
    },
    handleCommand(command){
      if(command=='changePwd'){
        this.jumpToChangePwd()
        return
      }
      if(command=="exit"){
        this.confirmDialogVisible=true
      }
      if(command=="singlePage"){
        this.jumpToSinglePage()
      }
    },
    changeUrl(url){
      this.url=url
    },
    handleSelect(index){
      if(index==='1'){
        if(this.$route.path==='/chat'){
          return
        }
        this.$router.push({
          path:"/chat"
        })
        return
      }
    }
  },
  mounted() {
    this.$bus.$on('changeUrl',this.changeUrl)
    this.username=JSON.parse(localStorage.getItem("username"))
    const title=this.$route.query.title
    if(title){
      this.searchInput=title
    }
  }
}
</script>

<style scoped>
.font-famliy{
  font-family: 微软雅黑;
  font-size: 18px;
  /*border-bottom: none;*/
}
.user-name{
  font-size: 13px;
  font-family: 微软雅黑;
}
.el-dropdown-link{
  cursor: pointer;
}
.border{
  border-bottom:1px solid #FFFFFF;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.el-dropdown-link{
  cursor: pointer;
}
</style>